feat(partition): add tooltip #544

monfera · 2020-02-10T13:55:01Z

Summary

Adds shape picking calculation, basic event handler and cursor location transform.
It may return multiple items, for example:

multilayer treemap: it returns all hovered layers (can be less than the total number of layers if the user hovers over what's a gap at a granular level, but inside a rectangle at a less granular level)
pie/sunburst: we may extend the logic such that it covers the entire pixel (now it covers the corner of the pixel, so currently it'll yield up to one shape)

Checklist

~~Any consumer-facing exports were added to src/index.ts (and stories only import from ../src except for test data & storybook)~~
This was checked for cross-browser compatibility, including a check against IE11
~~Proper documentation or storybook story was added for features that require explanation or tutorials~~
Unit tests were updated or added to match the most common scenarios
Each commit follows the convention

codecov-io · 2020-02-10T14:09:42Z

Codecov Report

Merging #544 into master will increase coverage by 0.34%.
The diff coverage is 82.92%.

@@            Coverage Diff             @@
##           master     #544      +/-   ##
==========================================
+ Coverage   71.08%   71.43%   +0.34%     
==========================================
  Files         214      214              
  Lines        6215     6269      +54     
  Branches     1150     1200      +50     
==========================================
+ Hits         4418     4478      +60     
+ Misses       1778     1772       -6     
  Partials       19       19

Impacted Files	Coverage Δ
...ypes/partition_chart/layout/viewmodel/viewmodel.ts	`13.44% <ø> (ø)`	⬆️
...t_types/xy_chart/state/selectors/compute_legend.ts	`100% <ø> (ø)`	⬆️
src/utils/commons.ts	`100% <ø> (ø)`	⬆️
src/chart_types/xy_chart/utils/specs.ts	`100% <ø> (ø)`	⬆️
...es/partition_chart/layout/types/viewmodel_types.ts	`80% <ø> (ø)`	⬆️
src/utils/geometry.ts	`100% <ø> (ø)`	⬆️
...types/partition_chart/layout/types/config_types.ts	`100% <ø> (ø)`	⬆️
...rtition_chart/layout/viewmodel/link_text_layout.ts	`10.52% <ø> (ø)`	⬆️
...art_types/xy_chart/annotations/annotation_utils.ts	`100% <ø> (ø)`	⬆️
.../chart_types/partition_chart/layout/types/types.ts	`100% <ø> (ø)`	⬆️
... and 40 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4d73ff3...918939e. Read the comment docs.

monfera · 2020-02-11T18:48:39Z

Added data collection for which individual data array elements make up the sunburst slice or treemap rectangle on @markov00's request. The collection and identification of the original Datum elements in the passed-on data array is done via their zero-based indices in the array. Here's an example in case of a three-layer sunburst:

A new story is added, which has more than one input Datum for each (leaf) slice.

Move `Datum`, `Rotation`, `Position` and `Color` to `utils/commons`. Decouple legend from axis position method and move the `scales` to `utils/scales`.

This commit will decouple the tooltip component from the XY chart to allow Partition and other chart type an ease use. BREAKING CHANGE: the `SeriesIdentifier` type is generalized into a simplified object with two values in common: `specId` and `key`. A specialized `XYChartSeriesIdentifier` extends now the base `SeriesIdentifier`. The `SettingsSpec` prop `showLegendDisplayValue` is renamed to `showLegendExtra` and its default value is now `false` hiding the current/last value on the legend by default. close elastic#246

rshen91

This looks good! I could use some clarification on the positioning of the tooltip when it approaches the end of the canvas - I'm including a giphy that shows the tooltip not adjusting when it is greater than the canvas perimeter (I'm thinking it should pivot to the right of the cursor sooner than it currently is?).

Is this something this PR should address or is there a subsequent PR that will fix it?

nickofthyme

LGTM, would be nice to have an interaction VRT for this.

src/chart_types/partition_chart/state/selectors/tooltip.ts

This commit moves the `Datum`, `Rotation`, `Position` and `Color` into `utils/commons`. It decouples the legend from axis position and moves the `scales` to `utils/scales`. It decouples the tooltip component from the XY chart to allow Partition charts and other chart to use it. close #246 Co-authored-by: Marco Vettorello <[email protected]>

# [18.0.0](v17.1.1...v18.0.0) (2020-03-17) ### Code Refactoring * clean up TS types ([#554](#554)) ([22f7635](22f7635)), closes [#547](#547) [#547](#547) * decouple tooltip from XY chart ([#553](#553)) ([e70792e](e70792e)), closes [#246](#246) ### Features * cleaner color API on SeriesSpec ([#571](#571)) ([f769f7c](f769f7c)) * **legend:** allow color picker component render prop ([#545](#545)) ([90f4b95](90f4b95)) * **partition:** add element click, over and out events ([#578](#578)) ([103df02](103df02)) * **partition:** add tooltip ([#544](#544)) ([6bf9a69](6bf9a69)), closes [#246](#246) * percentage display in partitioning charts ([#558](#558)) ([d6aa8d7](d6aa8d7)) * specify series name with a function on SeriesSpec ([#539](#539)) ([358455a](358455a)) * xAccessor can be a function accessor ([#574](#574)) ([bcc3d63](bcc3d63)) ### BREAKING CHANGES * The `getSpecId`, `getGroupId`, `getAxisId` and `getAnnotationId` are no longer available. Use a simple `string` instead. * `customSeriesColors` prop on `SeriesSpec` is now `color`. The `CustomSeriesColors` type is replaced with `SeriesColorAccessor`. * Remove `customSubSeriesName` prop on series specs in favor of cleaner api using just the `name` prop on `SeriesSpec`. The types `SeriesStringPredicate`, `SubSeriesStringPredicate` have been removed. * the `SeriesIdentifier` type is generalized into a simplified object with two values in common: `specId` and `key`. A specialized `XYChartSeriesIdentifier` extends now the base `SeriesIdentifier`. The `SettingsSpec` prop `showLegendDisplayValue` is renamed to `showLegendExtra` and its default value is now `false` hiding the current/last value on the legend by default.

# [18.0.0](elastic/elastic-charts@v17.1.1...v18.0.0) (2020-03-17) ### Code Refactoring * clean up TS types ([opensearch-project#554](elastic/elastic-charts#554)) ([6ce56fa](elastic/elastic-charts@6ce56fa)), closes [opensearch-project#547](elastic/elastic-charts#547) [opensearch-project#547](elastic/elastic-charts#547) * decouple tooltip from XY chart ([opensearch-project#553](elastic/elastic-charts#553)) ([cb02cd0](elastic/elastic-charts@cb02cd0)), closes [opensearch-project#246](elastic/elastic-charts#246) ### Features * cleaner color API on SeriesSpec ([opensearch-project#571](elastic/elastic-charts#571)) ([6a78c4e](elastic/elastic-charts@6a78c4e)) * **legend:** allow color picker component render prop ([opensearch-project#545](elastic/elastic-charts#545)) ([22ef1e6](elastic/elastic-charts@22ef1e6)) * **partition:** add element click, over and out events ([opensearch-project#578](elastic/elastic-charts#578)) ([4189573](elastic/elastic-charts@4189573)) * **partition:** add tooltip ([opensearch-project#544](elastic/elastic-charts#544)) ([0cffed4](elastic/elastic-charts@0cffed4)), closes [opensearch-project#246](elastic/elastic-charts#246) * percentage display in partitioning charts ([opensearch-project#558](elastic/elastic-charts#558)) ([993a448](elastic/elastic-charts@993a448)) * specify series name with a function on SeriesSpec ([opensearch-project#539](elastic/elastic-charts#539)) ([fc6430b](elastic/elastic-charts@fc6430b)) * xAccessor can be a function accessor ([opensearch-project#574](elastic/elastic-charts#574)) ([f702e2c](elastic/elastic-charts@f702e2c)) ### BREAKING CHANGES * The `getSpecId`, `getGroupId`, `getAxisId` and `getAnnotationId` are no longer available. Use a simple `string` instead. * `customSeriesColors` prop on `SeriesSpec` is now `color`. The `CustomSeriesColors` type is replaced with `SeriesColorAccessor`. * Remove `customSubSeriesName` prop on series specs in favor of cleaner api using just the `name` prop on `SeriesSpec`. The types `SeriesStringPredicate`, `SubSeriesStringPredicate` have been removed. * the `SeriesIdentifier` type is generalized into a simplified object with two values in common: `specId` and `key`. A specialized `XYChartSeriesIdentifier` extends now the base `SeriesIdentifier`. The `SettingsSpec` prop `showLegendDisplayValue` is renamed to `showLegendExtra` and its default value is now `false` hiding the current/last value on the legend by default.

monfera added 3 commits February 10, 2020 11:40

chore: factor out nullSectorViewModel

d25c688

feat: treemap shape pick

336ce8f

feat: sunburst shape pick

dfbac01

monfera added the :tooltip Related to hover tooltip label Feb 10, 2020

monfera requested a review from markov00 February 10, 2020 13:55

monfera self-assigned this Feb 10, 2020

elastic deleted a comment from robgil Feb 10, 2020

monfera and others added 2 commits February 11, 2020 11:32

Merge branch 'master' into pick-shape

d36276c

feat: collect original datum indices

d44fcf3

monfera and others added 4 commits February 12, 2020 10:01

test: add image for new mock

c0cf290

Merge branch 'master' into pick-shape

708bdd6

Merge branch 'master' into pick-shape

025c84a

chore: add parsing action and split tooltipValues (elastic#516)

f056b77

markov00 added the wip work in progress label Feb 13, 2020

markov00 added 6 commits February 13, 2020 17:53

Merge branch 'master' into pick-shape

d80d134

refactor: decouple legend and tooltip phase 1 (elastic#491)

2242fca

Move `Datum`, `Rotation`, `Position` and `Color` to `utils/commons`. Decouple legend from axis position method and move the `scales` to `utils/scales`.

docs: fix filteredLabel ids (elastic#552)

8262d19

Merge branch 'master' into pr/544

5a9bde1

Merge branch 'master' into pr/544

022115b

nickofthyme force-pushed the master branch from b5d8489 to f3a05f1 Compare February 21, 2020 15:18

markov00 added 2 commits February 21, 2020 16:37

feat: attach tooltip to the picker

3e2b507

Merge branch 'master' into pr/544

4d73ff3

markov00 changed the title ~~feat: pick shape~~ feat(partition): add tooltip Feb 21, 2020

markov00 requested review from nickofthyme and rshen91 February 21, 2020 16:23

markov00 removed the wip work in progress label Feb 21, 2020

rshen91 reviewed Feb 24, 2020

View reviewed changes

nickofthyme approved these changes Feb 28, 2020

View reviewed changes

src/chart_types/partition_chart/state/selectors/tooltip.ts Outdated Show resolved Hide resolved

markov00 added 2 commits March 2, 2020 12:04

Merge branch 'master' into pr/544

922628c

refactor: the TooltipValue type less tied to the XY chart

918939e

markov00 self-assigned this Mar 2, 2020

markov00 merged this pull request into elastic:master Mar 2, 2020

markov00 mentioned this pull request Mar 3, 2020

Roadmap #3

Closed

93 tasks

markov00 mentioned this pull request Mar 18, 2020

Update dependency @elastic/charts to v18.1.0 elastic/kibana#60578

Merged

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(partition): add tooltip #544

feat(partition): add tooltip #544

monfera commented Feb 10, 2020

codecov-io commented Feb 10, 2020 •

edited

Loading

monfera commented Feb 11, 2020

rshen91 left a comment

nickofthyme left a comment

feat(partition): add tooltip #544

feat(partition): add tooltip #544

Conversation

monfera commented Feb 10, 2020

Summary

Checklist

codecov-io commented Feb 10, 2020 • edited Loading

Codecov Report

monfera commented Feb 11, 2020

rshen91 left a comment

Choose a reason for hiding this comment

nickofthyme left a comment

Choose a reason for hiding this comment

codecov-io commented Feb 10, 2020 •

edited

Loading